<template>
  <div class="hall_mv">
    <div class="pic" v-if="StateReturnLeft">
      <van-icon name="arrow-left" @click="goBack" />
    </div>
    <h2>MV汇总</h2>
    <ul class="content">
      <li
        v-for="item in singerUrl"
        :key="item.id"
        @click="selectPlayList(item)"
      >
        <div class="cover_num">
          <img :src="item.cover_pic" alt />
          <p></p>
        </div>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      singerUrl: [],
      StateReturnLeft: true,
    };
  },
  created() {
    this.getData();
    console.log(this.$route.params.id);
  },
  methods: {
    getData() {
      if (this.$route.params.id == undefined) {
        axios
          .get("/api/mv", {
            params: {
              id: "t0032kwa29w",
            },
          })
          .then((res) => {
            this.StateReturnLeft = false;
            console.log(res.data.data.recommend);
            this.singerUrl = res.data.data.recommend;
          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        axios
          .get("/api/mv", {
            params: {
              id: this.$route.params.id,
            },
          })
          .then((res) => {
            console.log(res.data.data.recommend);
            this.singerUrl = res.data.data.recommend;
          })
          .catch((err) => {
            console.error(err);
          });
      }
    },
    selectPlayList(item) {
      const id = item.vid;
      this.$router.push({ path: `/mvplayer/${id}` });
      this.$store.commit("setMv", item);
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.cover-num {
  position: relative;
}
.cover-num > span {
  position: absolute;
  display: block;
  right: 10px;
  bottom: 3px;
  z-index: 100;
  background-color: #d1d7d8a9;
  border-radius: 20px;
  width: 100px;
}
ul.content > li {
  width: 160px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
ul.content > li img {
  width: 90%;
  border-radius: 20px;
}
ul.content > li > span {
  width: 90%;
  display: block;
  font-size: 12px;
  margin: 0 auto;
}
.pic {
  position: relative;
}
.van-icon {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}
</style>